<template>
  <div>
    <van-nav-bar title="@我的" left-arrow fixed placeholder @click-left="route.push({path:'/message'})">
      <template #icon>
        <van-icon name="setting" size="18" />
      </template>
    </van-nav-bar>
    <!-- @内容区域 -->
    <div>
      <van-cell-group>
        <van-cell v-for="index in 10" :key="index" :border="false">
          <template #icon>
            <van-image :src="url" round width="50" height="50" style="flex-shrink: 0"></van-image>
          </template>
          <template #title>
            <span class="ait-pl-6">这是用户昵称</span>
          </template>
          <template #label>
            <span class="ait-pl-6 ait-clamp-1">提到了你：@张大仙 昨天氨基酸卡就是卡卡手机卡精神可嘉</span>
          </template>
          <template #value>
            <van-image :src="url" width="100" height="60" class="ait-ml-auto" style="flex-shrink: 0"></van-image>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 自定义样式 -->
      <!-- <div class="ait-item" v-for="index in 10" :key="index">
        <van-image :src="url" round width="50" height="50"></van-image>
        <div class="item-name">
          <span>这是用户昵称</span>
          <span>提到了你：@张大仙 昨天</span>
        </div>
        <van-image :src="url" width="100" height="60" class="ait-ml-auto"></van-image>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const route=useRouter();

let url = ref('https://img.yzcdn.cn/vant/cat.jpeg')
</script>

<style scoped lang='scss'>
.ait-ml-auto {
  margin-left: auto;
}

.ait-pl-6 {
  padding-left: 6px;
}
.ait-clamp-1 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; //需要显示的行数
  overflow: hidden;
  text-overflow: ellipsis;
}
.ait-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  .item-name {
    height: 40px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding-left: 10px;
  }
}
</style>